<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js"></script>
	<body>
		<div id="zhf">{{name}}、{{age}}
		<hr>
		{{hobby}}、{{hobby[0]}}、{{hobby[hobby.length-1]}}
		<hr />
		{{girlfriend.name}}、{{girlfriend.age}}、{{girlfriend}}
		<hr>
		{{cars[0].name}}、{{cars[0].color}}
		{{cars[cars.length-1].name}}、{{cars[cars.length-1].color}}、
		{{cars}}
		<h1>{{address}}</h1>
		<h2>{{address}}</h2>
		<h3>姓名(单值)、年纪(单值)、爱好(数组)、女朋友(对象)、豪车(对象数组)</h3>
		<h4>{{address}}</h4>
		<h5>{{address}}</h5>
		<h6>{{address}}</h6>
		<input type="text" v-model="address" name="address" id="address" />
		</div>
	</body>
	<script>
		//data形势有三种，1.对象写法2.函数写法3.ES6（js6）类似函数
		new Vue({	
			el:"#zhf",//固定写死，el是element，挂载点，和页面id=app相对应
			data:{//vue管理数据，固定写死data
				msg:"hello",
				name:"城墙",//字符串类型两边使用双引号活着单引号
				age:18,//整数直接写
				hobby:["爬山","唱歌"],//字符串数组
				girlfriend:{
					name:"皮皮猪",
					age:16,
				},
				cars:[
					{name:"劳斯莱斯",
					color:"white",
					},
					{name:"奔驰" ,
					color:"blue"},
					{name:"宝马",
					color:"black"}]
				
			}
			// data:function(){
			// 	//函数声明，函数有返回值
			// 	return {//返回一个js对象
			// 		msg:"hello vue function",
			// 		address:"0000"
			// 	}
				
			// }
			// data(){
			// 	//函数声明，函数有返回值
			// 	return {//返回一个js对象
			// 		msg:"hello vue function",
			// 		address:"0000"
			// 	}
				
			// }
			});

	</script>
</html>
